<template>
  <div>id: {{ id }}</div>
  <ul>
    <li>
      <p>问：获取菜单的接口是什么？</p>
      <p>答：</p>
      <duPre :code="code0"></duPre>
    </li>
    <li>
      <p>问：接口返回的数据格式是什么？</p>
      <p>答：</p>

      <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border default-expand-all>
        <el-table-column prop="mc" label="key" width="180" />
        <el-table-column prop="lx" label="类型" width="180" />
        <el-table-column prop="mr" label="默认" width="180" />
        <el-table-column prop="bz" label="备注" />
      </el-table>
    </li>
  </ul>
</template>

<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()
const id = route.query.id
const code0 = `
接口是/dev-api/menu/getAll
接口在/src/api/system/menu.js里的getMenuApi方法
mock数据在/mock/getMenu.json
`
const tableData = [
  {
    id: 1,
    mc: 'id',
    lx: 'String',
    mr: '',
    bz: '模块唯一标识',
  },
  {
    id: 2,
    mc: 'order',
    lx: 'Number',
    mr: '',
    bz: '模块的排序号',
  },
  {
    id: 3,
    mc: 'name',
    lx: 'String',
    mr: '',
    bz: '模块名',
  },
  {
    id: 4,
    mc: 'isIndex',
    lx: 'Boolean',
    mr: '',
    bz: '是否是首页模块',
  },
  {
    id: 5,
    mc: 'path',
    lx: 'String',
    mr: '',
    bz: '模块文件夹名',
  },
  {
    id: 6,
    mc: 'menu',
    lx: 'Array',
    mr: '[ ]',
    bz: '菜单',
    children: [
      {
        id: 7,
        mc: 'path',
        lx: 'String',
        mr: '',
        bz: '菜单路径 文件夹名/文件名',
      },
      {
        id: 8,
        mc: 'order',
        lx: 'Number',
        mr: '',
        bz: '菜单的排序号',
      },
      {
        id: 9,
        mc: 'meta',
        lx: 'Object',
        mr: '',
        bz: '菜单meta',
        children: [
          {
            id: 10,
            mc: 'title',
            lx: 'String',
            mr: '',
            bz: '菜单名',
          },
          {
            id: 11,
            mc: 'cache',
            lx: 'Boolean',
            mr: 'false',
            bz: '是否被缓存',
          },
        ],
      },
      {
        id: 12,
        mc: 'isTopmenu',
        lx: 'Boolean',
        mr: '',
        bz: '是否是顶部菜单',
      },
      {
        id: 13,
        mc: 'children',
        lx: 'Arrary',
        mr: '[ ]',
        bz: '子菜单',
      },
    ],
  },
]
</script>

<style scoped>
p {
  line-height: 24px;
}
li {
  margin-bottom: 40px;
}
</style>
